<%--
表格显示页
User: wangyanginfo
Date: 12-9-7
Time: 上午10:23
--%>
<#assign c=JspTaglibs["http://java.sun.com/jsp/jstl/core"]>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>表格显示</title>
<link rel="stylesheet" type="text/css" href="<@c.url value="/js/easyUI/themes/default/easyui.css" />"/>
<link rel="stylesheet" type="text/css" href="<@c.url value="/js/easyUI/themes/icon.css" />"/>
<script type="text/javascript" src="<@c.url value="/js/jquery-1.7.2.min.js" />"></script>
<script type="text/javascript" src="<@c.url value="/js/easyUI/jquery.easyui.min.js" />"></script>
<script type="text/javascript" src="<@c.url value="/js/easyUI/locale/easyui-lang-zh_CN.js" />"></script>
<link rel="stylesheet" type="text/css" href="<@c.url value="/css/query_list.css" />"/>
<script>
    // 页面加载初始化方法
    $(function () {
        initDataGrid();
    });
    // 数据表格初始化方法
    function initDataGrid() {
        $('#displayTable').datagrid({
            fit:true, //表格自适应
            fitColumns:true, //列自适应
            nowrap:true, //是否换行
            autoRowHeight:false, //自动行高
            striped:true,
            collapsible:true, //是否可折叠
            url:'<@c.url value="/system/queryUsers.do" />',
            sortName:'loginId',
            sortOrder:'asc',
            remoteSort:false,
            idField:'loginId',
            singleSelect:false, //是否单选
            pagination:true, //分页控件
            rownumbers:true, //行号
            scrollbarSize:0,
            loadMsg:"数据加载中.....",
            frozenColumns:[
                [
                    {field:'ck', checkbox:true},
                    {title:'登录ID', field:'loginId', width:50, sortable:true}
                ]
            ],
            columns:[
                [
                    {title:'基础信息', colspan:13},
                    {field:'userId', title:'操作', width:30, align:'center', rowspan:2,
                        formatter:function (value) {
                            return '<a href="#" style="color:red;text-decoration:none;" ' +
                                    'onclick="updateUser(\'' + value + '\');">修改</a>';
                        }
                    }
                ],
                [
                    {field:'name', title:'姓名', width:40,
                        formatter:function (value) {
                            return '<a href="#" style="text-decoration:none;" ' +
                                    'onclick="updateUser(\'' + value + '\');">' + value + '</a>';
                        }
                    },
                    {field:'gender', hidden:true},
                    {field:'genderName', title:'性别', width:20},
                    {field:'birthday', title:'生日', width:30, sortable:true},
                    {field:'deptId', hidden:true},
                    {field:'deptName', title:'部门', width:60},
                    {field:'job', hidden:true},
                    {field:'jobName', title:'职位', width:50},
                    {field:'mobile', title:'手机', width:32},
                    {field:'tel', title:'电话', width:30},
                    {field:'email', title:'邮箱', width:100},
                    {field:'enabled', hidden:true},
                    {field:'enabledName', title:'有效性', width:24}

                ]
            ],
            toolbar:"#dataGridToolbar"
        });
        //设置分页控件
        var p = $('#displayTable').datagrid('getPager');
        $(p).pagination({
            pageSize:10, //每页显示的记录条数，默认为10
            pageList:[10, 20, 30, 40, 50], //可以设置每页记录条数的列表
            beforePageText:'第', //页数文本框前显示的汉字
            afterPageText:'页    共 {pages} 页',
            displayMsg:'当前显示 {from} - {to} 条记录   共 {total} 条记录'
        });
    }
    // 窗口初始化方法
    function initWindow(title, url) {
        $('#userDialog').window({
            modal:true,
            minimizable:false,
            maximizable:false,
            collapsible:false,
            title:title,
            href:url
        });
    }
    // 打开窗口方法
    function insertUser() {
        var title = '添加用户信息';
        var url = '<@c.url value="/system/userItem.jsp" />';
        initWindow(title, url);
        $('#userDialog').window('open');
    }

    function updateUser(value) {
        var title = '修改用户信息';
        var url = '<@c.url value="/system/queryUser.do?userQuery.userId=" />' + value;
        initWindow(title, url);
        $('#userDialog').window('refresh');
        $('#userDialog').window('open');
    }

    function doSubmit(maker) {
        alert(maker);
        var url = '<@c.url value="/system/updateUser.do" />';
        if (maker == 'insert') {
            url = '<@c.url value="/system/insertUser.do" />';
        }
        alert(url);
        $('#userItemForm').form('submit', {
            url: url,
            success: function(data){
                var data = eval('(' + data + ')');
                alert(data.success);
                if (data.success){
                    alert(data.message)
                    doCancel();
                    doReLoadSearch();
                }
            }
        });
    }

    function doCancel() {
        $('#userDialog').window('close');
    }

    function resize() {
        $('#displayTable').datagrid('resize', {
            width:700,
            height:400
        });
    }
    function getSelected() {
        var selected = $('#displayTable').datagrid('getSelected');
        if (selected) {
            alert(selected.loginId + ":" + selected.name + ":" + selected.deptName + ":" + selected.email);
        }
    }
    function getSelections() {
        var ids = [];
        var rows = $('#displayTable').datagrid('getSelections');
        alert(rows.length)
        for (var i = 0; i < rows.length; i++) {
            ids.push(rows[i].loginId);
        }
        alert(ids.join(':'));
    }
    function clearSelections() {
        $('#displayTable').datagrid('clearSelections');
    }
    function selectRow() {
        $('#displayTable').datagrid('selectRow', 2);
    }
    function selectRecord() {
        $('#displayTable').datagrid('selectRecord', '002');
    }
    function unselectRow() {
        $('#displayTable').datagrid('unselectRow', 2);
    }
    function mergeCells() {
        $('#displayTable').datagrid('mergeCells', {
            index:2,
            field:'addr',
            rowspan:2,
            colspan:2
        });
    }

    // 用户信息查询方法
    function doSearch() {
        $('#displayTable').datagrid('load', {
            'userQuery.loginId':$('#loginId').val(),
            'userQuery.name':$('#name').val(),
            'userQuery.deptId':$('#deptId').combobox('getValue'),
            'userQuery.job':$('#job').combobox('getValue'),
            'userQuery.email':$('#email').val(),
            'userQuery.mobile':$('#mobile').val(),
            'userQuery.enabled':$('#enabled').combobox('getValue')
        });
    }

    function doReLoadSearch() {
        $('#displayTable').datagrid('reload', {
            'userQuery.loginId':$('#loginId').val(),
            'userQuery.name':$('#name').val(),
            'userQuery.deptId':$('#deptId').combobox('getValue'),
            'userQuery.job':$('#job').combobox('getValue'),
            'userQuery.email':$('#email').val(),
            'userQuery.mobile':$('#mobile').val(),
            'userQuery.enabled':$('#enabled').combobox('getValue')
        });
    }
</script>
</head>
<body>
<!-- 用户详细信息DIV -->
<div id="userDialog" class="easyui-window" data-options="closed:true" style="width:600px;height:480px;padding:5px;"></div>
<!-- 用户列表DIV -->
<table id="displayTable"></table>
<!-- 用户列表查询工具栏DIV -->
<div id="dataGridToolbar" style="height:auto">
    <div style="margin-left: 5px;">
        <div class="queryClassUl">
            <ui>
                <li>
                    <span>登录名：</span>
                    <input type="text" id="loginId" name="loginId" class="inputTextClass"/>
                </li>
                <li>
                    <span>姓&nbsp;&nbsp;&nbsp;&nbsp;名：</span>
                    <input type="text" id="name" name="name" class="inputTextClass"/>
                </li>
                <li>
                    <span>机&nbsp;&nbsp;&nbsp;&nbsp;构：</span>
                    <input class="easyui-combobox" id="deptId" name="deptId"
                           data-options="url:'<@c.url value="/system/queryComboboxByDept.do"/>',
                    valueField:'id', textField:'text', panelHeight:'auto'"/>
                </li>
                <li>
                    <span>职&nbsp;&nbsp;&nbsp;&nbsp;位：</span>
                    <input class="easyui-combobox" id="job" name="job"
                           data-options="url:'<@c.url value="/system/queryComboboxByDict.do?param=JOB_TYPE"/>',
                    valueField:'id', textField:'text', panelHeight:'auto'"/>
                </li>
                <li>
                    <span>邮&nbsp;&nbsp;&nbsp;&nbsp;箱：</span>
                    <input type="text" id="email" name="email" class="inputTextClass"/>
                </li>
            </ui>
            <ui>
                <li>
                    <span>手&nbsp;&nbsp;&nbsp;&nbsp;机：</span>
                    <input type="text" id="mobile" name="mobile" class="inputTextClass"/>
                </li>
                <li>
                    <span>有效性：</span>
                    <input class="easyui-combobox" id="enabled" name="enabled"
                           data-options="url:'<@c.url value="/system/queryComboboxByDict.do?param=IS_VALIDITY"/>',
                    valueField:'id', textField:'text', panelHeight:'auto'"/>
                </li>
                <li>&nbsp;</li>
                <li>&nbsp;</li>
                <li style="text-align: center;">
                    <a href="#" class="easyui-linkbutton" iconCls="icon-search" onclick="doSearch();">Search</a>
                </li>
            </ui>
        </div>
    </div>
    <div>
        <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="insertUser();">添加</a>
        <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="deleteUser();">删除</a>
    </div>
</div>
</body>
</html>